<template>
	<view class="">
		<view class="font-box">
			<fui-text :text="text" :size="45"></fui-text>
			<fui-text :text="hint" :size="28"></fui-text>
		</view>
		<form>
			<view class="form_box">
				<view class="form_box_item">
					<view class="uni-column">
						<input class="uni-input" placeholder="输入手机号" v-model="userInfo.mobile" @blur="check_mobile" />
					</view>

					<fui-row margin-bottom="24rpx">
						<fui-col :span="14">
							<view class="input">
								<input class="uni-input" placeholder="验证码" v-model="userInfo.code" @blur="check_sm_code" />
							</view>
						</fui-col>
						<fui-col :span="8" :offset="1">
							<fui-button type="success" @click="getSMCode" radius="0" :disabled="isConfirmTxt" height="80rpx">
								<span v-show="show_text">获取验证码</span>
								<span v-show="time_show">倒计时 {{confirmTxt}}</span></fui-button>
						</fui-col>
					</fui-row>
					<view class="uni-btn">
						<fui-button type="success" @click="login" :disabled="is_login" radius="0">登录</fui-button>
					</view>
				</view>
			</view>

		</form>

		<!-- 加载 -->
		<fui-loading v-show="is_fixed"></fui-loading>
	</view>
</template>

<script>
	import {
		httpRequest
	} from '../../utils/request.js'


	export default {
		data() {
			return {
				userInfo: {

				},
				is_login: true, // 登录按钮控制
				is_fixed: false, // 加载
				confirmTxt: 60, //倒计时时间60秒
				isConfirmTxt: true, //提交按钮是否可点击
				timer: null, // 倒计时
				time_show: false,
				show_text: true,
				text: "手机号验证码登录",
				hint: "未注册的手机号验证后将自动创建新账号"
			}
		},
		onLoad() {

		},
		methods: {
			check_sm_code(e) {
				if (e.detail.value == "") {
					uni.showToast({
						icon: "error",
						title: '请输入短信验证码',
						position: 'center',

					})
					// this.is_login = true

				} else {

					this.is_login = false
				}
			},
			login() {
				if (this.userInfo.code == undefined) {
					this.is_login = true
					uni.showToast({
						icon: "error",
						title: '请输入短信验证码',
						position: 'center',

					})

					return false
				}

				this.is_fixed = true
				// this.$store.commit("Setfixed", this.is_fixed)
				httpRequest("/api/app_code_login", "post", this.userInfo).then((res) => {

					this.is_fixed = false
					if (res.avatarUrl == "") {
						res.avatarUrl =
							"https://c-ssl.duitang.com/uploads/item/202005/10/20200510010150_2zSAt.jpeg"
					}
					if (res.is_vip == 0) {
						res.is_vip = "普通用户"
					} else {
						res.is_vip = "会员用户"
					}
					if (res.gender == 1) {
						res.gender = "靓仔"
					} else {
						res.gender = "靓女"
					}
					let auth_token = res.token
					uni.setStorageSync("auth_token", res.token)
					let userInfo = {
						"avatarUrl": res.avatarUrl,
						"created_at": res.created_at,
						"gender": res.gender,
						"grants": {
							"object": res.object,
							"total_granted": res.total_granted,
							"total_used": res.total_used,
							"total_available": res.total_available,
							"expire_at": res.expire_at,
						},
						"is_vip": res.is_vip,
						"nick_name": res.nick_name,
						"open_id": res.open_id
					}

					this.$store.commit("SetUserInfo", res)
					uni.showToast({
						icon: 'success',
						title: '登录成功',
						position: 'center',
						duration: 1500
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}, 1500)
				}).catch(err => {
					this.is_fixed = false
					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})

			},
			/* 手机号校验 */
			check_mobile(e) {
				if (e.detail.value == "") {
					uni.showToast({
						icon: "error",
						title: '请输入手机号',
						position: 'center',

					})
					return false
				}
				let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(e.detail.value)) {
					uni.showToast({
						icon: "error",
						title: '手机号错误',
						position: 'center',

					})
					return false
				} else {
					this.is_login = false // 允许登录按钮可点击
					this.isConfirmTxt = false
				}
			},



			/* 获取验证码 */
			getSMCode() {
				this.show_text = false
				this.time_show = true
				this.isConfirmTxt = true

				if (this.userInfo.mobile === undefined) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
						duration: 1500
					})
					this.isConfirmTxt = false
					this.show_text = true
					this.time_show = false
					return false

				}
				let query = {
					mobile: this.userInfo.mobile
				}
				httpRequest("/api/sm_cod", "get", query).then((res) => {
					this.time_show = true
					uni.showToast({
						title: "验证码已发送",
						icon: 'success',
					})
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})

				this.timer = setInterval(() => {

					if (this.confirmTxt === 0) {
						this.confirmTxt = ""
						this.isConfirmTxt = false
						this.show_text = true
						this.time_show = false
						clearInterval(this.timer);

					} else {
						this.confirmTxt--
					}
				}, 1000);

			},
			// click_btn()
		}
	}
</script>

<style scoped>
	.font-box {
		width: 95%;
		margin: 10px auto;

	}

	.form_box {
		width: 95%;
		height: 100%;
		margin: 10px auto;
		padding-top: 8px;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.form_box_item {
		padding: 0 10px;
	}

	.input {
		border: 1px solid rgb(220, 223, 230);
		padding: 10px 0;
		text-indent: 6px;
		border-radius: 6px;


	}

	/* 	.uni-input {
		border: 1px solid;
	} */
	.uni-column {
		border-radius: 6px;
		text-indent: 6px;
	}

	.uni-column,
	.uni-btn {
		/* width: 88%; */

		margin: 0 auto;
		border: 1px solid rgb(220, 223, 230);
		padding: 10px 0;
		margin-bottom: 15px;
	}


	.uni-column:nth-child(1) {
		margin-top: 10px;
	}

	.uni-btn {
		border: none;
	}

	.sm_cod {
		margin-left: 25px;
		width: 60%;
	}

	.sm_cod_btn {
		width: 29%;
		/* border: 1px solid; */
		position: absolute;
		top: 11%;

		right: 10px;
	}

	.sm_cod_btn>button {
		padding: 0;
	}
</style>